<template>
  <div class="show-comments-content">
    <div class="comments-area box b2-radius">
      <!-- 评论头部 -->
      <div class="comments-title">
        <div class="comment-info">
          <span class="comment-count"> {{ commentSize }} 条回复</span>
          <span>
            <b class="comment-auth-mod comment-auth">A</b>
            <i>文章作者</i>
          </span>
          <span>
            <b class="comment-auth-mod comment-mod">M</b>
            <i>管理员</i>
          </span>
        </div>
        <div class="comment-tips" style="">
          <span><span>欢迎发表您的观点</span></span>
        </div>
      </div>
      <!-- 评论内容区域 -->
      <div class="comments-area-content">
        <ol class="comment-list">
          <li
            class="commId"
            v-for="(item, index) in commentDatas"
            :key="index"
            :commid="item.commId"
            ref="comm"
          >
            <article class="comment">
              <figure class="gravatar avatar-parent">
                <picture class="picture">
                  <img :src="item.userImg" class="avatar lazy" />
                </picture>
              </figure>
              <div class="comment-item reply_div b2-radius">
                <div role="complementary" class="comment-meta">
                  <div class="comment-user-info">
                    <div>
                      <span class="comment-author">
                        <a
                          :parentuid="item.uid"
                          :artId="item.artId"
                          :commId="item.commId"
                          :ref="'comm' + item.commId"
                          class="parUname"
                          target="_blank"
                          href="#"
                          >{{ item.unickname }}</a
                        >
                      </span>
                    </div>
                  </div>
                  <div class="comment-floor">
                    <time class="b2timeago">{{ item.commTime }}</time>
                  </div>
                </div>
                <div itemprop="text" class="comment-content post-content">
                  <div
                    class="comment-content-text"
                    v-html="item.commContent"
                  ></div>
                  <div class="comment-footer">
                    <div class="comment-footer-tools">
                      <div class="comment-vote-hidden">
                        <div
                          class="comment-up text"
                          @click="likeCommit(item.commId)"
                          ref="ups"
                        >
                          <i
                            :ref="'like' + item.commId"
                            data_d="0"
                            state="1"
                            :commuid="item.uid"
                            :commid="item.commId"
                            :artId="item.artId"
                            uId=""
                            class="up iconfont icon-aixin"
                          >
                          </i>

                          <span>{{ item.commLikeNum }}</span>
                        </div>
                        <div
                          class="comment-down text"
                          @click="noLikeCommit(item.commId)"
                          ref="downs"
                        >
                          <i
                            :ref="'nolike' + item.commId"
                            data_d="0"
                            state="2"
                            :commuid="item.uid"
                            :commid="item.commId"
                            :artId="item.artId"
                            uId=""
                            class="down iconfont icon-buxihuan"
                          ></i>

                          <span>{{ item.commNolikeNum }}</span>
                        </div>
                      </div>
                      <div class="comment-item-hidden bbaacc">
                        <button class="btn" @click="huifu(item.commId)">
                          回复
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 评论回复 -->
              <ul class="children">
                <li>
                  <article
                    id="comment-1945"
                    itemscope="itemscope"
                    class="comment"
                  >
                    <div class="comment-item b2-radius">
                      <div :ref="'hui' + item.commId" class="hui">
                        <div
                          class="commentsReply"
                          :dianIndex="index"
                          style="
                            border-bottom: 1px solid #f0eeee;
                            margin-bottom: 10px;
                          "
                          v-for="(child, index) in item.child"
                          :key="index"
                          ref="comm"
                        >
                          <div role="complementary" class="comment-meta">
                            <div class="comment-user-info">
                              <div>
                                <span class="comment-author">
                                  <a
                                    :ref="'comm' + child.commId"
                                    class="nickname"
                                    :parentuid="child.uid"
                                    :artId="item.artId"
                                    :commId="item.commId"
                                    target="_blank"
                                    href="#"
                                    >{{ child.unickname }}</a
                                  >
                                  <span class="comment_at">@</span>
                                  <a target="_blank" href="#">{{
                                    child.parentUserNickname
                                  }}</a>
                                </span>
                              </div>
                            </div>
                            <div class="comment-floor">
                              <time
                                itemprop="datePublished"
                                class="b2timeago"
                                >{{ child.commTime }}</time
                              >
                            </div>
                          </div>
                          <div
                            itemprop="text"
                            class="comment-content post-content"
                          >
                            <div
                              class="comment-content-text"
                              v-html="child.commContent"
                            ></div>
                            <div class="comment-footer">
                              <div class="comment-footer-tools">
                                <div class="comment-vote-hidden">
                                  <div
                                    id="comment-up-1945"
                                    class="comment-up text"
                                    @click="likeCommit(child.commId)"
                                    ref="ups"
                                  >
                                    <i
                                      :ref="'like' + child.commId"
                                      data_d="0"
                                      state="1"
                                      :state="child.state"
                                      :commuid="child.uid"
                                      :commid="child.commId"
                                      :artId="child.artId"
                                      uId=""
                                      class="up iconfont icon-aixin"
                                    ></i>

                                    <span>{{ child.commLikeNum }}</span>
                                  </div>
                                  <div
                                    id="comment-down-1945"
                                    class="comment-down text"
                                    @click="noLikeCommit(child.commId)"
                                    ref="downs"
                                  >
                                    <i
                                      :ref="'nolike' + child.commId"
                                      data_d="0"
                                      state="2"
                                      :state="child.state"
                                      :commuid="child.uid"
                                      :commid="child.commId"
                                      :artId="child.artId"
                                      uId=""
                                      class="down iconfont icon-buxihuan"
                                    ></i>

                                    <span>{{ child.commNolikeNum }}</span>
                                  </div>
                                </div>
                                <div class="comment-item-hidden">
                                  <button
                                    data-id="1945"
                                    class="btn"
                                    @click="huifu(child.commId)"
                                  >
                                    回复
                                  </button>
                                </div>
                              </div>
                            </div>
                            <div id="comment-form-1945"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </article>
                </li>
              </ul>
            </article>
          </li>
        </ol>
      </div>
    </div>
    <!-- 富文本 -->
    <div id="wang-show" v-if="flag">
      <h4 style="margin-left: 3%; margin-top: 5px px">欢迎来到评论回复~~</h4>
      <div
        id="wang"
        style="
          width: 88%;
          margin-left: 25px px;
          margin-top: 10px;
          margin-left: 31px;
        "
      ></div>
      <div class="com-form-button">
        <div class="com-form-button-r">
          <button @click="commit" class="buttons">提交</button>
        </div>
      </div>
      <div class="com-form-button">
        <div class="com-form-button-r">
          <button class="buttons" @click="flag = !flag">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Editors from "wangeditor";
import axios from "axios";
import pubsub from "pubsub-js";
import hljs from 'highlight.js'
export default {
  name: "ShowComment",
  data() {
    return {
      curentindex: 0,
      curentNickname: "",
      editor: null,
      flag: false, //是否展示回复富文本
      artId: 0, //博文id
      uId: 0, //用户id
      commId: 0, //评论id
      parentuId: 0, //回复用户的id
      commContent: "", //评论内容
      state: "", //用户是否点赞状态
      articleCommentinfo: [],
    };
  },
  props: ["commentDatas", "commentSize"],

  mounted() {
    this.uId = this.$store.state.user
    this.artId = this.commentDatas[0].artId;
    this.selectCommentInfo();
  },

  methods: {
    selectCommentInfo() {
      const that = this;
      axios
        .get(
          "/aabbcc/commentThumbsInfo/toCommentThumbsInfo/" +
            this.artId +
            "/" +
            this.uId
        )
        .then(function (response) {
          if (response.data.code == 200) {
            that.articleCommentinfo = response.data.obj;
            if (response.data.code == 200) {
              setTimeout(() => {
                that.userThumbs();
              }, 200);
            }
          }
        });
    },
    //用户点赞信息展示（点赞就让其变红）

    userThumbs() {
      console.log(this.articleCommentinfo)
      //获取所有的用户评论信息
      for (var i = 0; i < this.articleCommentinfo.length; i++) {
        //拿到commentThumbs的commId
        var commId = this.articleCommentinfo[i].commId;
        //拿到状态
        var thumbsState = this.articleCommentinfo[i].state;
         for(var j = 0;j< this.articleCommentinfo.length;j++){
            if(commId == this.articleCommentinfo[j].commId){
                if(thumbsState == 1){
                    //是点赞
                    //拿到所有的喜欢标签并获取commid
                   for(var k = 0;k<this.$refs.ups.length;k++){
                     //循环每一个喜欢的p评论获取commid
                   
                    if(this.$refs.ups[k].querySelector(".up").getAttribute('commId') == commId){
                        this.$refs.ups[k].querySelector(".up").style.color='red'
                        this.$refs.ups[k].querySelector(".up").setAttribute("data_d",1)
                    }
                 }


                }else if(thumbsState == 2){
                    //是不喜欢
                        //拿到所有的喜欢标签并获取commid
                   for(var k = 0;k<this.$refs.downs.length;k++){
                     //循环每一个喜欢的p评论获取commid
                   
                    if(this.$refs.downs[k].querySelector(".down").getAttribute('commId') == commId){
                        this.$refs.downs[k].querySelector(".down").style.color='red'
                         this.$refs.downs[k].querySelector(".down").setAttribute("data_d",1)
                    }
                 }

                }
         }
      }
      }
    },
    //用户给评论喜欢点赞
    likeCommit(commid) {
      //获取博文id
      this.artId = this.$refs["like" + commid][0].getAttribute("artId");
      //获取被回复评论id
      this.commId = this.$refs["like" + commid][0].getAttribute("commid");
      //获取被回复用户id
      // this.parentuId = this.$$store.state.user;
      const that = this;
      if (
        typeof this.artId != "undefined" ||
        typeof this.commId != "undefined" ||
        typeof this.uId != "undefined"
      ) {
     
        if (  this.uId == "" || typeof this.uId == "undefined" || this.uId == 0) {
          this.open2("请先登录");
        } else {
          //判断是否点过赞(0是不点赞 1代表点赞)
          const info = this.$refs["like" + commid][0].getAttribute("data_d");
          if (info == 0) {
            //未点赞 进行点赞
            axios
              .get("/aabbcc/commentThumbs/onCommentlikeThumbs", {
                params: {
                  uId: this.uId,
                  artId: this.artId,
                  commId: this.commId,
                },
              })
              .then(function (response) {
                if (
                  response.data.code == 200 &&
                  response.data.massage == "SUCCESS"
                ) {
                  that.open4("谢谢你的点赞");
                  that.$refs["like" + commid][0].setAttribute("data_d", 1);
                  that.$refs["nolike" + commid][0].setAttribute("data_d", 0);
                  that.$refs["like" + commid][0].style.color = "red";
                  that.$refs["nolike" + commid][0].style.color = "#2882c5";
                  //发布信息
                  pubsub.publish("leave", response);
                }
              })
              .catch(function (error) {
                this.open2(error.message);
              });
          } else if (info == 1) {
            //已点赞 进行取消点赞
            //未点赞 进行点赞
            axios
              .get("/aabbcc/commentThumbs/outCommentlikeThumbs", {
                params: {
                  uId: this.uId,
                  artId: this.artId,
                  commId: this.commId,
                },
              })
              .then(function (response) {
                console.log(response);
                if (
                  response.data.code == 200 &&
                  response.data.massage == "SUCCESS"
                ) {
                   that.open4("下次记得点赞哟~~");
                  that.$refs["like" + commid][0].setAttribute("data_d", 0);
                  that.$refs["like" + commid][0].style.color = "#2882c5";
                  //发布信息
                  pubsub.publish("leave", response);
                }
              })
              .catch(function (error) {
                this.open2(error.message);
              });
          } else {
            this.open2("请求失败");
          }
        }
      } else {
        this.open2("数据有误");
      }

      console.log(this.artId + "--" + this.commId + "--" + this.uId);
    },
    //用户给评论不喜欢点赞
    noLikeCommit(commid) {
      //获取博文id
      this.artId = this.$refs["nolike" + commid][0].getAttribute("artId");
      //获取被回复评论id
      this.commId = this.$refs["nolike" + commid][0].getAttribute("commId");
      //获取被回复用户id
      // this.parentuId = this.$refs["nolike" + commid][0].getAttribute("commuid");
      const that = this;
      //判断用户的登录状态和数据信息
      if (
        typeof this.artId != "undefined" ||
        typeof this.commId != "undefined" ||
        typeof this.uId != "undefined"
      ) {
        //this.uId == "" || typeof this.uId == "undefined"
        if (this.uId == "" || typeof this.uId == "undefined" || this.uId == 0) {
          this.open2("请先登录");
        } else {
          //判断是否点过赞(1是不点赞 2代表点赞)
          const info = this.$refs["nolike" + commid][0].getAttribute("data_d");
          if (info == 0) {
            //未点赞 进行点赞

            axios
              .get("/aabbcc/commentThumbs/onCommentnolikeThumbs", {
                params: {
                  uId: this.uId,
                  artId: this.artId,
                  commId: this.commId,
                },
              })
              .then(function (response) {
                if (
                  response.data.code == 200 &&
                  response.data.massage == "SUCCESS"
                ) {
                    that.open4("点击成功~~");
                  that.$refs["nolike" + commid][0].setAttribute("data_d", 1);
                  that.$refs["like" + commid][0].setAttribute("data_d", 0);
                  that.$refs["like" + commid][0].style.color = "#2882c5";
                  that.$refs["nolike" + commid][0].style.color = "red";
                  //发布信息
                  pubsub.publish("leave", response);
                }
              })
              .catch(function (error) {
                this.open2(error.message);
              });
          } else if (info == 1) {
            //已点赞 进行取消点赞
            //未点赞 进行点赞
            axios
              .get("/aabbcc/commentThumbs/outCommentnolikeThumbs", {
                params: {
                  uId: this.uId,
                  artId: this.artId,
                  commId: this.commId,
                },
              })
              .then(function (response) {
                if (
                  response.data.code == 200 &&
                  response.data.massage == "SUCCESS"
                ) {
                   that.open4("取消成功~~");
                  that.$refs["nolike" + commid][0].setAttribute("data_d", 0);
                  that.$refs["nolike" + commid][0].style.color = "#2882c5";
                  //发布信息
                  pubsub.publish("leave", response);
                }
              })
              .catch(function (error) {
                this.open2(error.message);
              });
          } else {
            this.open2("请求失败");
          }
        }
      } else {
        this.open2("数据有误");
      }

      console.log(this.artId + "--" + this.commId + "--" + this.uId);
    },
    //警告提示
    open2(item) {
      this.$notify({
        title: "警告",
        message: item,
        type: "warning",
      });
    },
      open4(message) {
      //成功提示框
      this.$message({
        showClose: true,
        message: message,
        type: "success",
      });
    },
    huifu(commId) {
      //获取被回复的用户昵称
      this.curentNickname = this.$refs["comm" + commId][0].innerText;
      //获取博文id
      this.artId = this.$refs["comm" + commId][0].getAttribute("artId");
      //获取被回复评论id
      this.commId = this.$refs["comm" + commId][0].getAttribute("commId");
      //获取被回复用户id
      this.parentuId = this.$refs["comm" + commId][0].getAttribute("parentuid");
      this.flag = true;

      setTimeout(() => {
        //创建富文本
        this.editor = this.aba();
      }, 20);
    },
    commit() {
      //提交用户输入的数据
      //获取用户输入的内容
      this.commContent = this.editor.txt.html();
      //提交隐藏富文本
      this.flag = false;
      //判断是否符合要求
      if (
        typeof this.artId != "undefined" ||
        typeof this.commId != "undefined" ||
        typeof this.parentuId != "undefined"
      ) {
        //this.uId == "" || typeof this.uId == "undefined"
        if (this.uId == "" || typeof this.uId == "undefined" || this.uId == 0) {
          this.open2("请先登录");
        } else {
          if (
            this.commContent == "" ||
            typeof this.commContent == "undefined"
          ) {
            this.open2("请输入内容");
          } else {
            //axios提交数据
            axios
              .post("/aabbcc/addComment", {
                artId: this.artId,
                commId: this.commId,
                parentId: this.parentuId,
                commContent: this.commContent,
                uid: 13,
              })
              .then(function (response) {
                //发布信息
                pubsub.publish("leave", response);
              })
              .catch(function (error) {});
          }
        }
      } else {
        this.open2("数据有误");
      }

      console.log(
        this.artId +
          "--" +
          this.commId +
          "--" +
          this.parentuId +
          "--" +
          this.commContent
      );
    },
    aba() {
      var editor = new Editors("#wang");

      // const editor = new E( document.getElementById('wang') )
      // 设置编辑区域高度为 500px
      editor.config.height = 100;
      editor.config.zIndex = 500;
      editor.config.placeholder = "回复 @ " + this.curentNickname;
      editor.config.emotions = [
        {
          title: "新浪", // tab 的标题
          type: "image", // 'emoji' 或 'image' ，即 emoji 形式或者图片形式
          content: [
            {
              alt: "[坏笑]",
              src: `http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7a/shenshou_thumb.gif`,
            },
            {
              alt: "[舔屏]",
              src: `http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/60/horse2_thumb.gif`,
            },
            {
              alt: "[浮云]",
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/bc/fuyun_thumb.gif",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c9/geili_thumb.gif",
              alt: "[给力]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/f2/wg_thumb.gif",
              alt: "[围观]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/70/vw_thumb.gif",
              alt: "[威武]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6e/panda_thumb.gif",
              alt: "[熊猫]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/81/rabbit_thumb.gif",
              alt: "[兔子]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/bc/otm_thumb.gif",
              alt: "[奥特曼]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/15/j_thumb.gif",
              alt: "[囧]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/89/hufen_thumb.gif",
              alt: "[互粉]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c4/liwu_thumb.gif",
              alt: "[礼物]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/ac/smilea_thumb.gif",
              alt: "[呵呵]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/0b/tootha_thumb.gif",
              alt: "[嘻嘻]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6a/laugh.gif",
              alt: "[哈哈]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/14/tza_thumb.gif",
              alt: "[可爱]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/af/kl_thumb.gif",
              alt: "[可怜]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/a0/kbsa_thumb.gif",
              alt: "[挖鼻屎]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/f4/cj_thumb.gif",
              alt: "[吃惊]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6e/shamea_thumb.gif",
              alt: "[害羞]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c3/zy_thumb.gif",
              alt: "[挤眼]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/29/bz_thumb.gif",
              alt: "[闭嘴]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/71/bs2_thumb.gif",
              alt: "[鄙视]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6d/lovea_thumb.gif",
              alt: "[爱你]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/9d/sada_thumb.gif",
              alt: "[泪]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/19/heia_thumb.gif",
              alt: "[偷笑]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/8f/qq_thumb.gif",
              alt: "[亲亲]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/b6/sb_thumb.gif",
              alt: "[生病]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/58/mb_thumb.gif",
              alt: "[太开心]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/17/ldln_thumb.gif",
              alt: "[懒得理你]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/98/yhh_thumb.gif",
              alt: "[右哼哼]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6d/zhh_thumb.gif",
              alt: "[左哼哼]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/a6/x_thumb.gif",
              alt: "[嘘]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/af/cry.gif",
              alt: "[衰]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/73/wq_thumb.gif",
              alt: "[委屈]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/9e/t_thumb.gif",
              alt: "[吐]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/f3/k_thumb.gif",
              alt: "[打哈欠]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/27/bba_thumb.gif",
              alt: "[抱抱]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7c/angrya_thumb.gif",
              alt: "[怒]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/5c/yw_thumb.gif",
              alt: "[疑问]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/a5/cza_thumb.gif",
              alt: "[馋嘴]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/70/88_thumb.gif",
              alt: "[拜拜]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/e9/sk_thumb.gif",
              alt: "[思考]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/24/sweata_thumb.gif",
              alt: "[汗]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7f/sleepya_thumb.gif",
              alt: "[困]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6b/sleepa_thumb.gif",
              alt: "[睡觉]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/90/money_thumb.gif",
              alt: "[钱]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/0c/sw_thumb.gif",
              alt: "[失望]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/40/cool_thumb.gif",
              alt: "[酷]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/8c/hsa_thumb.gif",
              alt: "[花心]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/49/hatea_thumb.gif",
              alt: "[哼]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/36/gza_thumb.gif",
              alt: "[鼓掌]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d9/dizzya_thumb.gif",
              alt: "[晕]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/1a/bs_thumb.gif",
              alt: "[悲伤]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/62/crazya_thumb.gif",
              alt: "[抓狂]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/91/h_thumb.gif",
              alt: "[黑线]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6d/yx_thumb.gif",
              alt: "[阴险]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/89/nm_thumb.gif",
              alt: "[怒骂]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/40/hearta_thumb.gif",
              alt: "[心]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/ea/unheart.gif",
              alt: "[伤心]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/58/pig.gif",
              alt: "[猪头]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d6/ok_thumb.gif",
              alt: "[ok]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d9/ye_thumb.gif",
              alt: "[耶]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d8/good_thumb.gif",
              alt: "[good]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c7/no_thumb.gif",
              alt: "[不要]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d0/z2_thumb.gif",
              alt: "[赞]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/40/come_thumb.gif",
              alt: "[来]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d8/sad_thumb.gif",
              alt: "[弱]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/91/lazu_thumb.gif",
              alt: "[蜡烛]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6a/cake.gif",
              alt: "[蛋糕]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d3/clock_thumb.gif",
              alt: "[钟]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/1b/m_thumb.gif",
              alt: "[话筒]",
            },
          ],
        },
      ];
      //显示表情img
      editor.config.emotionShow = "icon";

      // 默认情况下，显示所有菜单
      editor.config.menus = ["bold", "emoticon"];
      // 挂载highlight插件
      editor.highlight = hljs;

      editor.create();
      return editor;
    },
  },
};
</script>

<style scoped>
#wang-show {
  position: fixed;
  bottom: 10px;
  background: #f7f7f7;
  /* border: 1px solid blue; */
  width: 63%;
  box-shadow: 1px 1px 21px #ccc;
}
.text {
  transition: all 0.5s;
}
.text:hover {
  transition: all 0.5s;
  transform: scale(1) translateY(-2px) translateZ(5px) !important;
  color: #258fe0;
}
.bbaacc {
  display: none;
}
.reply_div :hover .bbaacc {
  display: block;
}
.commentsReply:hover .comment-item-hidden {
  display: block;
}
.active {
  display: block !important;
}
.show-comments-content {
  width: 100%;
}
.btn {
  top: -19px;
  background: #2882c5;
  border: 1px solid #2882c5;
  border-radius: 13px;
  padding: 7px 17px;
  color: #fff;
  font-size: 14px;
  transition: 0.5s;
}
.btn:hover {
  transition: all 0.5s;
  transform: scale(1) translateY(-2px) translateZ(5px) !important;
  color: orange;
}
.comments-area {
  margin: 0 auto;
  margin-top: 15px;
  max-width: 100%;
  position: relative;
}
.comments-title {
  display: flex;
  justify-content: space-between;
  padding-bottom: 16px;
  font-size: 12px;
  padding: 16px 24px;
  color: #bcbcbc;
  align-items: center;
}
.comment-info {
  display: flex;
  align-items: center;
}
.comment-info span {
  margin-right: 10px;
  display: flex;
  align-items: center;
}
.comment-count {
  font-weight: 600;
  font-size: 18px;
  color: initial;
}

.comment-auth-mod {
  line-height: 15px;
  font-size: 12px;
  border: 1px solid;
  font-weight: 400;
  width: 15px;
  display: inline-block;
  height: 15px;
  text-align: center;
  margin-left: 3px;
  border-radius: 3px;
  font-size: 12px;
}
.comment-auth {
  border: 1px solid rgba(244, 53, 71, 0.09);
  color: rgba(244, 55, 72, 0.41);
}
.comment-mod {
  border: 1px solid rgba(102, 162, 222, 0.19);
  color: rgba(102, 162, 222, 0.41);
}
.comment-info span i {
  display: inline-block;
  font-style: normal;
  margin-left: 3px;
}
.comment-tips {
  max-width: 50%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.comments-area-content {
  padding: 0;
}
.comment-list {
  margin: 0 24px;
}
.comment {
  position: relative;
  display: flow-root;
}
.comment .gravatar {
  width: 40px;
  height: 40px;
  position: absolute;

  top: 17px;
  text-align: center;
}
.avatar-parent {
  position: relative;
  display: block;
}
.comment .gravatar img {
  border-radius: 100%;
  display: block;
  background-color: #eee;
  width: 100%;
  height: 100%;
}
.comment .comment-item {
  padding: 20px 0 20px 52px;
  border-top: 1px solid #f5f6f7;
}
.comment-meta {
  display: flex;
  justify-content: space-between;
  justify-content: baseline;
}
.comment-user-info {
  font-size: 12px;
  display: flex;
  align-items: baseline;
  width: 100%;
}
.comment-user-info > div {
  width: 100%;
}
.comment-author > a,
.comment-author {
  font-size: 15px;
  font-weight: 600;
}
.comment-author > a,
.comment-author {
  font-size: 15px;
  font-weight: 600;
}
.lv-icon {
  font-size: 12px;
  font-weight: 400;
  color: #797c80;
  height: 18px;
  line-height: 18px;
  border-radius: 3px;
  margin-right: 6px;
}
.comment-floor {
  font-size: 12px;
  color: #8590a6;
  margin-right: 10px;
}
.b2timeago {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comment-content-text {
  margin: 10px 0 20px;
  margin-left: 20px;
  line-height: 30px;
  color: #000;
}
.comment-content-text p {
  margin: 6px 0;
  word-wrap: break-word;
  border-radius: 3px;
  line-height: 1.5;
  color: #494b4d;
}
.comment-footer {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  align-items: center;
  color: #b2bac2;
  position: relative;
  margin-top: -17px;
}
.comment-footer-tools {
  display: flex;
}
.comment-footer-tools .comment-vote-hidden {
  display: flex;
}
.comment-list .comment-footer .text {
  color: #8590a6;
  padding: 4px 14px;
  border-radius: 20px;
  margin-left: 10px;
}
.comment-list .text {
  color: #2882c5 !important;
  margin-left: 771px;
}
.comment-list .fr {
  margin-left: 771px;
  padding: 4px 11px;
  background: #2882c5;
}
.comment-item-hidden {
  display: none;
  position: absolute;
  right: 10px;
  top: -15px;
}
.comment-list .comment-footer .text {
  color: #8590a6;
  padding: 4px 14px;
  border-radius: 20px;
  margin-left: 10px;
}
.comment-list .text {
  color: #2882c5 !important;
}
.comment {
  position: relative;
  display: flow-root;
}
.comment-list .children article .comment-item {
  border: 1px dashed #e2e2e2;
  margin-right: 20px;
  margin-bottom: 10px;
  background: #f9f9f9;
  margin-left: 37px;
  padding: 13px 0 0px 33px;
  border-radius: 10px;
}
.comment_at {
  color: #ccc;
  margin: 0 10px;
}
.comment-content-text {
  margin: 10px 0 20px;
  margin-left: 20px;
  line-height: 30px;
  color: #000;
}
.comment-footer {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  align-items: center;
  color: #b2bac2;
  position: relative;
  margin-top: -17px;
}
</style>